<template>
  <div class="products">
    <h3>产品列表页面</h3>
    <div class="search">
      产品名称：
      <input
        type="text"
        placeholder="请输入关键字"
        @input="inputFn"
        v-model="searchVal"
      />
      <button @click="addFn">新增</button>
      <button @click="delAllFn">批量删除</button>
    </div>
    <table>
      <tr>
        <th><input type="checkbox" v-model="isCheckAll" />全选</th>
        <th>产品名称</th>
        <th>产品编号</th>
        <th>修改时间</th>
        <th>成本价</th>
        <th>库存数</th>
        <th>总价</th>
        <th>登记人</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="item.id" v-show="item.isShow">
        <td>
          <input type="checkbox" v-model="checkList[index]" />
          {{ checkList[index] }}
        </td>
        <td>{{ item.pname }}</td>
        <td>{{ item.id }}</td>
        <td>{{ item.uptDate }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>{{ item.price * item.count }}</td>
        <td>{{ item.user }}</td>
        <td>
          <a href="javascript:;" @click="editFn(item.id)">编辑</a> |
          <a href="#" @click="delFn(index)">删除</a>
        </td>
      </tr>
      <tr>
        <td colspan="9">合计：{{ arr.length }} ,总计：{{ getTotal }}.</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      searchVal: "",
      checkList: [],
    };
  },
  created() {
    this.checkList = this.arr.map(() => false);
  },
  computed: {
    ...mapState(["arr"]),
    ...mapGetters(["getTotal"]),

    isCheckAll: {
      get() {
        return !this.checkList.includes(false);
      },
      set(val) {
        this.checkList = this.checkList.map(() => val);
      },
    },
  },
  filters: {
    fmtDate(val) {
      return `${val.getFullYear()}-${
        val.getMonth() + 1
      }-${val.getDate()} ${val.getHours()} : ${val.getMinutes()} `;
    },
  },
  methods: {
    ...mapMutations(["search", "delPro", "delProAll"]),
    inputFn() {
      console.log(this.searchVal);
      this.search(this.searchVal);
    },
    delFn(idx) {
      this.delPro(idx);
      this.checkList.splice(idx, 1);
    },
    delAllFn() {
      let delId = [];
      this.checkList.forEach((item, index) => {
        if (item) {
          delId.push(this.arr[index].id);
        }
      });
      this.delProAll(delId);
      this.checkList = this.arr.map(() => false);
      console.log(this.checkList);
    },
    addFn() {
      this.$router.push("/home/add");
    },
    editFn(id) {
      this.$router.push({ path: "/home/edit", query: { id: id } });
    },
  },
};
</script>

<style lang="less" scoped>
.products {
  padding: 10px;
  h3 {
    line-height: 50px;
    border-bottom: 1px solid gray;
  }
  .search {
    line-height: 50px;
    input {
      border: 1px solid #86cdea;
      outline: none;
      height: 30px;
      margin-right: 10px;
      width: 200px;
      text-indent: 1em;
    }
    button {
      border: 1px solid #86cdea;
      height: 30px;
      background-color: #86cdea;
      margin-right: 10px;
      padding: 0 10px;
      color: #fff;
    }
  }
  table {
    border: 1px solid gray;
    border-collapse: collapse;
    width: 98%;
    text-align: center;
    th,
    td {
      border: 1px solid gray;
      line-height: 25px;
      a {
        text-decoration: none;
        color: #000;
      }
    }
  }
}
</style>